<template>
  <div class="kitchen-container">
    <van-nav-bar fixed title="厨房故事" />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list :immediate-check="false" v-model="loading" offset="0" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="kitchen-list">
          <div class="kitchen-item" v-for="item in KitchenStoreList" :key="item.id" @click="goDetail(item.url)">
            <h3 class="title">{{ item.title }}</h3>
            <div class="pic">
              <van-image lazy-load fit="cover" :src="`http://pic.angelboy.cn/web/${item.imageids}.jpg`" />
            </div>
            <div class="source">
              <span>来自</span>
              <span class="name">{{ item.author }}</span>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import request from '@/utils/request/request'
export default {
  name: 'kitchen-store',
  data() {
    return {
      id: '',
      top: 0,
      KitchenStoreList: [],
      isLoading: false,
      loading: false,
      finished: false
    }
  },
  methods: {
    //下拉刷新
    onRefresh() {
      this.id = ''
      this.KitchenStoreList = []
      this.requestKitchen()
    },
    //滚动加载
    async onLoad() {
      this.requestKitchen()
    },
    async requestKitchen(toast) {
      /*
      请求地址：http://120.55.28.235/public/getArticleList.shtml
      请求方式： post
      请求参数：{
        id: id(第一次请求不用带，翻页时带上上一次请求最后一条数据的id,4位数)
      }
      */
      const {
        data: { list: res }
      } = await request({
        url: '/public/getArticleList.shtml',
        method: 'post',
        data: {
          id: this.id
        }
      })
      toast && toast.clear()
      this.isLoading = false
      this.loading = false
      if (res.length > 0) {
        this.KitchenStoreList = [...this.KitchenStoreList, ...res]
        this.id = res[res.length - 1].id
      } else {
        this.finished = true
      }
    },
    // 前往详情页
    goDetail(url) {
      location.assign(url)
    }
  },
  created() {
    if (sessionStorage.getItem('kitchen-data')) {
      let kitchenData = JSON.parse(sessionStorage.getItem('kitchen-data'))
      this.id = kitchenData.id
      this.KitchenStoreList = kitchenData.KitchenStoreList
      this.top = kitchenData.top
      return
    }
    const toast = this.$toast.loading({
      message: '加载中...',
      forbidClick: true,
      duration: 0
    })
    this.requestKitchen(toast)
  },
  mounted() {
    window.scrollTo(0, this.top)
    document.addEventListener('scroll', () => {
      this.top = window.pageYOffset
    })
    window.addEventListener('beforeunload', () => {
      sessionStorage.removeItem('kitchen-data')
    })
  },
  beforeDestroy() {
    // 需要保存的数据
    let obj = {
      top: this.top,
      id: this.id,
      KitchenStoreList: this.KitchenStoreList
    }
    sessionStorage.setItem('kitchen-data', JSON.stringify(obj))
  }
}
</script>

<style lang="less" scoped>
.kitchen-container {
  padding-top: 46px;

  /deep/.van-nav-bar__content {
    z-index: 999;
  }
  /deep/.van-nav-bar__title {
    font-size: 18px;
    font-weight: 600;
    color: #444;
  }

  .kitchen-list {
    padding: 10px;

    .kitchen-item {
      margin-bottom: 30px;
      .title {
        color: #030303;
        font-weight: 700;
        padding-bottom: 5px;
        font-size: 15px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .pic {
        width: 100%;
        height: 190px;

        .van-image {
          height: 100%;
          width: 100%;

          /deep/.van-image__img {
            height: 100%;
            width: 100%;
          }
        }
      }
      .source {
        padding: 5px 0;

        span {
          font-size: 14px;
          color: #515151;
          line-height: 18px;

          &.name {
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
